<template>
  <div class="tabbar" :class="{ 'tabbar--fixed': fixed }">
    <div class="tabbar__content">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="tabbar__item"
        :class="{ 'tabbar__item--active': activeIndex === index }"
        @click="onItemClick(item, index)"
      >
        <!-- 图标 -->
        <div class="tabbar__icon">
          <van-icon
            v-if="item.icon"
            :name="activeIndex === index ? item.activeIcon || item.icon : item.icon"
            :size="iconSize"
          />
          <img
            v-else-if="item.iconUrl"
            :src="activeIndex === index ? item.activeIconUrl || item.iconUrl : item.iconUrl"
            :alt="item.text"
            class="tabbar__icon-img"
          />
          
          <!-- 徽章 -->
          <van-badge
            v-if="item.badge"
            :content="item.badge"
            :dot="item.dot"
            class="tabbar__badge"
          />
        </div>
        
        <!-- 文字 -->
        <div class="tabbar__text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const props = defineProps({
  // 标签项列表
  items: {
    type: Array,
    default: () => []
  },
  // 当前激活的索引
  modelValue: {
    type: Number,
    default: 0
  },
  // 是否固定在底部
  fixed: {
    type: Boolean,
    default: true
  },
  // 图标大小
  iconSize: {
    type: [Number, String],
    default: '22px'
  },
  // 激活颜色
  activeColor: {
    type: String,
    default: '#1989fa'
  },
  // 非激活颜色
  inactiveColor: {
    type: String,
    default: '#7d7e80'
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: true
  },
  // z-index
  zIndex: {
    type: [Number, String],
    default: 1
  }
})

const emit = defineEmits(['update:modelValue', 'change', 'click'])

const router = useRouter()
const route = useRoute()

// 当前激活索引
const activeIndex = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 样式计算
const tabbarStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    zIndex: props.zIndex
  }
})

// 点击标签项
const onItemClick = (item, index) => {
  if (index === activeIndex.value) return
  
  // 更新激活索引
  activeIndex.value = index
  
  // 触发事件
  emit('change', index, item)
  emit('click', index, item)
  
  // 路由跳转
  if (item.to) {
    if (typeof item.to === 'string') {
      router.push(item.to)
    } else {
      router.push(item.to)
    }
  }
}

// 根据当前路由设置激活状态
const updateActiveByRoute = () => {
  const currentPath = route.path
  const index = props.items.findIndex(item => {
    if (typeof item.to === 'string') {
      return item.to === currentPath
    } else if (item.to && item.to.path) {
      return item.to.path === currentPath
    }
    return false
  })
  
  if (index !== -1 && index !== activeIndex.value) {
    activeIndex.value = index
  }
}

// 监听路由变化
watch(() => route.path, updateActiveByRoute, { immediate: true })
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.tabbar {
  position: relative;
  display: flex;
  background: $tabbar-background;
  user-select: none;

  &--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: $z-index-fixed;
    @include safe-area-bottom(padding-bottom);
  }

  &__content {
    display: flex;
    width: 100%;
    height: $tabbar-height;
    border-top: 1px solid $tabbar-border-color;
  }

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacing-xs 0;
    cursor: pointer;
    transition: all $transition-duration-fast;
    position: relative;

    &:active {
      background: rgba(0, 0, 0, 0.05);
    }

    &--active {
      .tabbar__icon {
        color: v-bind(activeColor);
      }
      
      .tabbar__text {
        color: v-bind(activeColor);
      }
    }
  }

  &__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: $spacing-xs;
    color: v-bind(inactiveColor);
    transition: color $transition-duration-fast;
  }

  &__icon-img {
    width: v-bind(iconSize);
    height: v-bind(iconSize);
    object-fit: contain;
  }

  &__badge {
    position: absolute;
    top: -4px;
    right: -8px;
  }

  &__text {
    font-size: $font-size-xs;
    color: v-bind(inactiveColor);
    transition: color $transition-duration-fast;
    @include ellipsis(1);
    max-width: 100%;
    padding: 0 $spacing-xs;
  }
}

// 深色模式适配
@include dark-mode {
  .tabbar {
    background: #1f1f1f;
    
    &__content {
      border-top-color: #333;
    }
    
    &__item {
      &:active {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}

// 横屏适配
@include landscape {
  .tabbar {
    &__content {
      height: calc($tabbar-height * 0.8);
    }
    
    &__text {
      font-size: calc($font-size-xs * 0.9);
    }
  }
}
</style>